import { Component, Vue } from 'vue-property-decorator';
import { mapState }from 'vuex';
import { MODULE_PATH } from '@/store/modules/system'
import VtSideNav from '~/VtSideNav';
import VtIcon from '~/VtIcon';

import './style.scss';

@Component({
  name: 'demo',
  components: {
    'vt-side-nav': VtSideNav,
    'vt-icon': VtIcon,
  },
  computed: {
    ...mapState(MODULE_PATH,['isMobi','docWidth'])
  }
})
export default class Demo extends Vue {
  readonly isMobi!: boolean;
  readonly docWidth!: number;
  mobiNavVisible = false;
  render() {
    return (
      <div class="vtx-demo">
        { this.docWidth < 1000 ?  this.renderMobiNav() :   <vt-side-nav></vt-side-nav> }
        <div 
          class={["vtx-demo__container", this.docWidth < 1000 ? 'vtx-demo__container-mobi' : '']}
          onClick={() => {this.mobiNavVisible = false}}
        >
          <router-view></router-view>
        </div>
      </div>
    );
  }

  renderMobiNav() {
    return (
      <div class="vtx-sideNav-mobi">
        <div class="vtx-sideNav-mobi__icon">
          <vt-icon
            onClick={() => {this.mobiNavVisible = !this.mobiNavVisible}}
            name="iconmenu2"
            size={20}>
          </vt-icon>
        </div>
        <div class={["vtx-sideNav-mobi__content", this.mobiNavVisible ? 'is-active' : 'is-hide']}>
          <vt-side-nav></vt-side-nav>
        </div>
      </div>
    )
  }
  created() { }
  mounted() { }
  beforeDestroy() { }
}